<template>
    <view class="redpacket">
        <view class="redheader">
            <view class="redheaderTop flex flex-align flex-center">
                <view class="flex-1 list">
                    <view class="redheaderTopText"> 红包余额 </view>
                    <view class="redheaderTopPrice"> <span>￥</span> {{ datainfo.balance3 }} </view>
                </view>
            </view>
            <view class="redheaderBottom">
                <view class="flex flex-align" style="height: 100%;">
                    <view class="flex-1 flex flex-align flex-center">
                        <image src="/static/teamcenter/chong01.png" mode="scaleToFill" />
                        <view class="redheaderBottomText" @click="goUrl('/pagesA/chongzhi/chongzhiLog',true)"> 充值记录 </view>
                    </view>
                    <view class="flex-1 flex flex-align flex-center">
                        <image src="/static/teamcenter/chong02.png" mode="scaleToFill" />
                        <view class="redheaderBottomText" @click="goUrl('/pagesA/chongzhi/refundLog',true)"> 退款记录 </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="redlist">
            <view class="redlistItem">
                <view class="flex flex-align flex-center" style="height: 100%;">
                    <view class="flex1" @click="toRecharge(1)">
                        <view class="redlistItemText" :class="{'active':tabActive == 1}"> 红包充值 </view>
                    </view>
                    <view class="flex1" @click="toRecharge(2)">
                        <view class="redlistItemText" :class="{'active':tabActive == 2}"> 红包退款 </view>
                    </view>
                </view>
            </view>
            <view class="chongzhiList" v-if="tabActive == 1">
                <view class="chongItem">
                    <view class="chongwen">充值金额</view>
                    <view class="chongprice flex flex-align">
                        <span>￥</span>
                        <input v-model="inputValue" type="number" placeholder="请输入充值金额" />
                    </view>    
                </view>
                <view class="chongItem">
                    <view class="chongList flex flex-align flex-bt" @click="selectTab = 1">
                        <view class="flex flex-align left">
                            <image src="/static/teamcenter/chong03.png" mode="scaleToFill" />
                            <view class="chongpriceText"> 支付宝充值 </view>
                        </view>
                        <view class="right">
                            <uni-icons :type="selectTab == 1 ? 'checkbox-filled' : 'circle'" size="24" :color="selectTab==1?'#007aff':'#999'"></uni-icons>
                        </view>
                    </view>   
                    <view class="chongList flex flex-align flex-bt" @click="selectTab = 3">
                        <view class="flex flex-align left">
                            <image src="/static/teamcenter/chong04.png" mode="scaleToFill" />
                            <view class="chongpriceText"> 银联充值 </view>
                        </view>
                        <view class="right">
                            <uni-icons :type="selectTab == 3 ? 'checkbox-filled' : 'circle'" size="24" :color="selectTab==3?'#007aff':'#999'"></uni-icons>
                        </view>
                    </view>    
                    <view class="chongList flex flex-align flex-bt" @click="selectTab = 2">
                        <view class="flex flex-align left">
                            <image src="/static/teamcenter/chong05.png" mode="scaleToFill" />
                            <view class="chongpriceText"> 微信充值 </view>
                        </view>
                        <view class="right">
                            <uni-icons :type="selectTab == 2 ? 'checkbox-filled' : 'circle'" size="24" :color="selectTab==2?'#007aff':'#999'"></uni-icons>
                        </view>
                    </view>     
                </view>
            </view>
            <view class="chongzhiList" v-if="tabActive == 2">
                <view class="chongItem">
                    <view class="chongwen">退款金额</view>
                    <view class="chongprice flex flex-align">
                        <span>￥</span>
                        <input v-model="inputValue" type="number" placeholder="请输入退款金额" />
                    </view>  
                    <view class="wenzi">
                        单笔退款上限500元，审核通过后退款至微信钱包
                    </view>  
                </view>
            </view>
            <view class="chongBtn">
                <button class="btn blue-linear" @click="recharge">{{tabActive == 1 ? '充值' : '退款'}}</button>
            </view>
        </view>
        <uni-popup ref="popup" background-color="#fff" borderRadius="20rpx">
            <view class="popup-content flex flex-align flex-column flex-center" >
                <view class="wenzis"> 支付宝</view>
                <!-- #ifdef H5 -->
                <vue-qr
                    v-if="zhifuImg"
                    id="payQR"
                    :text="zhifuImg"
                    :size="240"
                    colorDark="#000000"
                    colorLight="#ffffff"
                    :logoSrc="chong03"
                />
                <!-- #endif -->
                <view class="wenzi"> 请保存二维码，打开支付宝扫码支付</view>
            </view>
        </uni-popup>
    </view>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import API_CENTER from '@/api/teamcenter'
import { onLoad } from '@dcloudio/uni-app';
import { goUrl, toast } from '@/utils';
import chong03 from '@/static/teamcenter/chong03.png'
// #ifdef H5
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
// #endif
// import vueQr from 'vue-qr/src/packages/vue-qr.vue';

onLoad(() => {
    
})
const inputValue = ref<any>('')
const userStore = useUserStore()
const datainfo = ref<any>(userStore.userInfo)
const tabActive = ref<any>(1)
const inputDialog = ref<any>()
const selectTab = ref(1) 
const popup = ref<any>()
const zhifuImg = ref('')
const recharge = () => {
    if(inputValue.value == 0){
        toast(tabActive.value == 1 ? '请输入充值金额' : '请输入退款金额')
        return
    }
    if(tabActive.value == 1){
       const params = {
        price:unref(inputValue),
        payment_code:unref(datainfo).pay_new_switch,
        pay_type:selectTab.value,
        payment_back:location.href.split('#')[0]
        };

        API_CENTER.recharge(params).then(res => {
            if(selectTab.value == 2||selectTab.value==3){
                window.location.href = res.param.url
            }else{
                zhifuImg.value = res.param.url
                popup.value.open()
            }
            inputValue.value = ''
           
        })
    }else{
        const params = {
            price:unref(inputValue),
        };
        API_CENTER.rechargeRefund(params).then(res => {
            toast('退款申请已提交')
            inputValue.value = ''
            setTimeout(() => {
                userStore.setUserInfo()
            }, 1000);
        })
    }
    
}

const toRecharge = (type: number) => {
    tabActive.value = type
}


const openFafang = () => {
    inputDialog.value.open()
}


</script>
<style scoped lang="scss">
    .redpacket {
        padding: 30rpx 0;
        .redheader{
            margin: 0 30rpx;
            .redheaderTop{
                padding: 50rpx 0;
                color: #fff; background: url('@/static/teamcenter/chongBg.png') no-repeat;
                background-size: 100% 100%;
                font-size: 28rpx;
                .list{
                    text-align: center;
                    .redheaderTopText{
                        font-size: 24rpx;opacity: 0.8;
                    }
                    .redheaderTopPrice{
                        font-size: 42rpx;font-weight: bold;margin-top:10rpx;
                        span{
                            font-size: 20rpx;
                        }
                    }
                }
            }
            .redheaderBottom{
                margin:0rpx 0rpx 20rpx;box-sizing: border-box;background:#D4E3FF;border-radius: 10rpx;
                height:80rpx;
                .flex-1{
                    margin-right: 40rpx;color: #3C7CFF;border-right: 1px solid #B8CAEF;
                    image{
                        width:40rpx;
                        height: 40rpx;
                    }
                }
                .flex-1:last-child{
                    margin-right: 0;border-right: 0;
                }
            }
        }
        .redlist{
            background: #F5F6FA;
            padding:0 0 30rpx 0;
            border-radius: 20rpx 20rpx 0 0;
            .redlistItem{
                padding: 0 30rpx;height: 80rpx;text-align: center;color: #969799;
                .redlistItemText{
                    position: relative;
                }
                .flex1{margin-right: 50rpx;}
                .flex1:last-child{
                    margin-right: 0;
                }
                .active{
                    font-size: 28rpx;
                    color: #333;font-weight: bold;
                }
                .active:after{
                    content: '';
                    position: absolute;
                    bottom: -10rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 30rpx;
                    height: 8rpx;border-radius: 10rpx;
                    background: #3C7CFF;
                }
            }
        }
        
    }
    .chongzhiList{
        padding: 30rpx 30rpx 0;
        .chongItem{
            margin-bottom: 20rpx;
            background: #fff;
            padding: 20rpx;
            border-radius: 20rpx;
            .chongwen{
                font-size: 28rpx;
                color: #333;margin-top: 10rpx;
            }
            .left{
                font-size: 24rpx;
                color: #333;
                image{
                    width: 60rpx;
                    height: 60rpx;margin-right: 6rpx;
                }
            }
            .chongList{
                height: 80rpx;
            }
            .chongprice{
                span{
                    font-size: 24rpx;margin-right: 10rpx;
                }
                input{
                    flex: 1;font-size: 28rpx;height: 60rpx;
                }
            }
            .wenzi{
                font-size: 24rpx;
                color: #999;margin-top: 10rpx;border-top: 1px solid #F5F6FA;padding-top: 20rpx;
            }
        }
    }
    .chongBtn{
        margin-top: 50rpx;
    }
.popup-content{
    padding: 30rpx;
    .wenzis{
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
    }
}
</style>
